/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2021-08-20 15:54 周5
 * @Description  : 搜索面板
 */
/** @jsx jsx */
import { Form, Input, Select } from 'antd';
import { jsx } from '@emotion/react';
import React from 'react';

export interface User {
  id: string;
  name: string;
  email: string;
  title: string;
  organization: string;
  token: string;
}

interface SearchPanelProps {
  users: User[];
  params: {
    name: string;
    personId: string;
  };
  setParams: (params: SearchPanelProps['params']) => void;
}

export const SearchPanel = ({ params, setParams, users }: SearchPanelProps) => {
  return (
    <Form layout={'inline'} css={{ marginBottom: '2rem' }}>
      <Form.Item>
        <Input
          type="text"
          placeholder={'项目名'}
          value={params.name}
          onChange={(evt) => {
            setParams({ ...params, name: evt.target.value });
          }}
        />
      </Form.Item>
      <Form.Item>
        <Select
          value={params.personId}
          onChange={(value) => {
            setParams({ ...params, personId: value });
          }}
        >
          <Select.Option value={''}>负责人</Select.Option>
          {users.map((user) => (
            <Select.Option value={user.id} key={user.id}>
              {user.name}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
    </Form>
  );
};
